<script>
// 组名编辑弹窗
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'EditImg'
})
</script>
<script setup>
import Upload from '@/components/app/upload.vue'
import { qrMiniprogramOrignalForm } from '@/data'
import { deepClone, isEmpty } from '@/utils'
import { ref, defineExpose, reactive } from 'vue'
import { toRaw } from '@vue/reactivity'
import { ElMessageBox } from 'element-plus'
const isRefresh = ref(true)
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}

const dialogVisible = ref(false)

const form = ref({
	type: '3',
	title: '',
	appId: '',
	appUrl: '',
	imgurl: '【图片】',
	show: ''
})
const isNew = ref(true)
let initForm = {}

const formRef = ref()
const show = (type, val) => {
	form.value.show = val
	dialogVisible.value = true
}
const rules = ref({
	title: [
		{ required: true, message: '请输入名称', trigger: 'blur' }
		// { min: 1, max: 18, message: '不得超过18个字', trigger: 'blur' }
	]
})
const change = (e) => {}
const cancel = (done) => {
	resetForm()
	dialogVisible.value = false
}
const getUploadImg = (val) => {
	console.log('组件返回的img')
	form.value.imgurl=val.url
}
const resetForm = () => {
	// form.value = qrMiniprogramOrignalForm
}
const submit = () => {
	// if (!formRef) return
	// formRef.value.validate((valid) => {
	// 	if (valid) {
	// 		cancel()
	// 		emits('getDialogueData', toRaw(form.value))
	// 	} else {
	// 		console.log('error submit!')
	// 		return false
	// 	}
	// })
	
	if (!formRef) return
	formRef.value.validate((valid) => {
		cancel()
		var data = JSON.stringify(form.value)
		var dara =JSON.parse(data)
		emits('getChooseData', toRaw(dara))
		form.value.type= '3',
		form.value.title= '',
		form.value.appId= '',
		form.value.appUrl= '',
		form.value.imgurl= '【图片】',
		form.value.show= ''
	})
}
const emits = defineEmits(['getDialogueData'])
defineExpose({
	show
})
</script>
<template>
	<div v-if="dialogVisible">
		<el-dialog
			v-model="dialogVisible"
			:title="(isNew == true ? '新增' : '编辑') + '小程序'"
			width="700px"
			:before-close="cancel"
		>
			<el-tag style="" class="app-el-tag-common app-margin-bottom" type="primary">
				<MyIcon class="app-icon app-primary-font" name="Bell" />
				请填写企业微信后台绑定的小程序id和路径，否则会造成发送失败
			</el-tag>
			<el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
				<el-form-item label="小程序标题：" prop="title">
					<el-input v-model="form.title" />
				</el-form-item>
				<el-form-item label="小程序appID：" prop="appId">
					<el-input v-model="form.appId" />
				</el-form-item>
				<el-form-item label="小程序路径：" prop="appUrl">
					<div>
						<el-input v-model="form.appUrl" />
						<div class="app-words-tip-weak">注意：小程序路径应以html作为后缀</div>
					</div>
				</el-form-item>
				<el-form-item label="小程序封面：">
					<div>
						<div>
							<Upload @getImg="getUploadImg($event, val)" />
						</div>

						<div class="app-words-tip-weak">建议图片大小在2M以内,建议尺寸：352*282px</div>
					</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取消</el-button>
					<el-button type="primary" @click="submit">保存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style scoped>
.dialog-footer button:first-child {
	margin-right: 10px;
}
</style>
